import React, { useMemo } from "react";
import { TakeAddress } from "@/type/TakeType";
import { Button, Checkbox, Modal, SwipeAction, Toast } from "antd-mobile";
import { useEnhanceDispatch, useEnhanceSelector } from "@/hooks";
import { deleteTakeThunk, fetchDefaultTakeIdThunk, fetchTakeListThunk, settingDefaultTakeThunk } from "@/store/modules/takeStore";
import type { Action } from "antd-mobile/es/components/swipe-action";
import "./TakeCard.scss";


interface TakeCardProps {
   take: TakeAddress;
}

const TakeCard: React.FunctionComponent<TakeCardProps> = ({ take }) => {
   const enhanceDispatch = useEnhanceDispatch();
   const defaultId: number = useEnhanceSelector(state => state.takeStore.defaultId);
   const isDefault: boolean = useMemo(() => take.address_id === defaultId, [defaultId]);
   const rightActions: Action[] = [
      {
         key: "show",
         text: "详情",
         color: "warning",
      },
      {
         key: "delete",
         text: "删除",
         color: "danger",
      },
   ];
   /**
    * @description 点击删除地址的回调函数
    * */
   const deleteTake = async () => {
      const result: boolean = await Modal.confirm({ content: `确认退出删除${take.name}吗?` });
      if (!result) return;
      try {
         await enhanceDispatch(deleteTakeThunk(take.address_id)).unwrap();
         await enhanceDispatch(fetchTakeListThunk()).unwrap();
         Toast.show({ icon: "success", content: "删除成功" });
      } catch (rejectedValueOrSerializedError: any) {
         Toast.show(rejectedValueOrSerializedError);
      }
   };

   /**
    * @description
    * */
   const onAction = async (action: Action, event: React.MouseEvent) => {
      if (action.key === "delete") {
         deleteTake();
      } else if (action.key === "show") {

      }
   };

   /**
    * @description 设置默认地址的回调函数
    * */
   const changeDefault = async () => {
      try {
         const content = await enhanceDispatch(settingDefaultTakeThunk(take.address_id)).unwrap();
         await enhanceDispatch(fetchDefaultTakeIdThunk()).unwrap();
         Toast.show({ icon: "success", content });
      } catch (rejectedValueOrSerializedError: any) {
         Toast.show(rejectedValueOrSerializedError);
      }
   };
   return (
      <SwipeAction rightActions={rightActions} onAction={onAction}>
         <div className="take-card">
            <div className="info">
               <div className="name">{take.name} {take.phone}</div>
               <div className="message">{Object.values(take.region)} {take.detail}</div>
            </div>
            <div className="controls">
               <div className="left">
                  <Checkbox checked={isDefault} defaultChecked={isDefault} onChange={changeDefault}>默认</Checkbox>
               </div>
               <div className="right">
                  <Button size="mini" color="primary">编辑</Button>
                  <Button size="mini" color="primary" onClick={deleteTake}>删除</Button>
               </div>
            </div>
         </div>
      </SwipeAction>
   );
};

export default TakeCard;
